<template>
    <div>
        <el-divider></el-divider>
        <el-row :gutter="20">
            <el-col :span="13" :offset="12">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 10px;">
                    <el-form-item>
                        <el-button size="small" type="primary" plain>创建</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="formInline.user" size="small" placeholder="请输入要查询的信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-divider direction="vertical"></el-divider>
                        <el-button icon="el-icon-search" size="small" type="primary" @click="onSubmit">查询</el-button>
                        <el-button icon="el-icon-refresh" size="small">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="历史审批信息">
                        <el-table-column prop="processHeadline" label="流程标题">
                        </el-table-column>
                        <el-table-column prop="processId" label="流程ID">
                        </el-table-column>
                        <el-table-column label="流程实例">
                            <el-table-column prop="instanceName" label="实例标题">
                            </el-table-column>
                            <el-table-column prop="instanceId" label="实例ID">
                            </el-table-column>
                            <el-table-column prop="submitter" label="提交者">
                            </el-table-column>
                            <el-table-column prop="startTime" label="开始时间">
                            </el-table-column>
                            <el-table-column prop="endTime" label="结束时间">
                            </el-table-column>
                            <el-table-column prop="useTime" label="总耗时">
                            </el-table-column>
                            <el-table-column prop="instanceState" label="实例状态">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.instanceState === '已完成' ? 'success' : 'danger'"
                                        disable-transitions>
                                        {{scope.row.instanceState}}</el-tag>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="10">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
            <el-descriptions title="历史流程实例信息" direction="vertical" :column="4" border>
                <el-descriptions-item label="流程名称">请假流程</el-descriptions-item>
                <el-descriptions-item label="流程ID">QJ11111</el-descriptions-item>
                <el-descriptions-item label="实例名称">员工请假流程</el-descriptions-item>
                <el-descriptions-item label="实例ID">QJYG01201</el-descriptions-item>
                <el-descriptions-item label="提交者">李白</el-descriptions-item>
                <el-descriptions-item label="起始时间">2016-05-01</el-descriptions-item>
                <el-descriptions-item label="结束时间">2016-05-10</el-descriptions-item>
                <el-descriptions-item label="耗时">9</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag size="small">已结束</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="流程详情">
                    <div class="block">
                        <el-timeline>
                            <el-timeline-item timestamp="2018/4/12" placement="top">
                                <el-card>
                                    <h4>更新 Github 模板</h4>
                                    <p>王小虎 提交于 2018/4/12 20:46</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="2018/4/3" placement="top">
                                <el-card>
                                    <h4>更新 Github 模板</h4>
                                    <p>王小虎 提交于 2018/4/3 20:46</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="2018/4/2" placement="top">
                                <el-card>
                                    <h4>更新 Github 模板</h4>
                                    <p>王小虎 提交于 2018/4/2 20:46</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "Approval",
        data() {
            return {
                currentPage: 0,
                dialogVisible: false,
                setSpan: 24,
                formInline: {
                    user: '',
                    region: ''
                },
                tableData: [{
                    startTime: '2016-05-03',
                    endTime: '2016-05-10',
                    processHeadline: '请假流程',
                    processId: 'QJ001',
                    instanceName: '员工请假',
                    instanceId: 'YG001',
                    submitter: '王小虎',
                    instanceState: '已完成',
                }, {
                    startTime: '2016-05-02',
                    endTime: '2016-05-11',
                    processHeadline: '请假流程',
                    processId: 'QJ002',
                    instanceName: '员工请假',
                    instanceId: 'YG002',
                    submitter: '王小虎',
                    instanceState: '已终止',
                }, {
                    startTime: '2016-05-04',
                    endTime: '2016-05-13',
                    processHeadline: '资质流程',
                    processId: 'ZZ001',
                    instanceName: '供销商资质审批',
                    instanceId: 'GXS001',
                    submitter: '王小虎',
                    instanceState: '已完成',
                }, {
                    startTime: '2016-05-01',
                    endTime: '2016-05-08',
                    processHeadline: '请假流程',
                    processId: 'QJ001',
                    instanceName: '员工请假',
                    instanceId: 'YG003',
                    submitter: '王小虎',
                    instanceState: '已终止',
                }, {
                    startTime: '2016-05-08',
                    endTime: '2016-05-15',
                    processHeadline: '资质流程',
                    processId: 'ZZ001',
                    instanceName: '供销商资质审批',
                    instanceId: 'GXS002',
                    submitter: '王小虎',
                    instanceState: '已完成',
                }, {
                    startTime: '2016-05-06',
                    endTime: '2016-05-10',
                    processHeadline: '出库流程',
                    processId: 'CK001',
                    instanceName: '车灯出库流程',
                    instanceId: 'QCCK001',
                    submitter: '王小虎',
                    instanceState: '已终止',
                }, {
                    startTime: '2016-05-07',
                    endTime: '2016-05-11',
                    processHeadline: '入库流程',
                    processId: 'RK001',
                    instanceName: '玻璃入库流程',
                    instanceId: 'QCRK001',
                    submitter: '王小虎',
                    instanceState: '已完成',
                }]
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => { });
            },
            handleEdit(index, row) {
                this.dialogVisible = true;
                console.log(index, row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>